<template>
  <div>
    <mu-appbar title="Create Tournament">
      <mu-icon-button icon="arrow_back" slot="left" @click="back"/>
      <mu-flat-button color="white" icon="add" slot="right" @click="addSubtournament"/>
    </mu-appbar>
    <div class="paper-container first">
      <mu-paper class="demo-paper" :zDepth="2" >
        <form>
          <mu-text-field v-model="tournamentInfo.name" label="Tournament Name" /><br/>
          <mu-text-field v-model="tournamentInfo.location" label="Location" /><br/>
          <mu-text-field v-model="tournamentInfo.organizer" label="Organizer" /><br/>
          <mu-text-field v-model="tournamentInfo.description" hintText="Tournament Description" multiLine :rows="3" :rowsMax="10"/><br/>
        </form>
      </mu-paper>
    </div>
    <div class="paper-container" v-for="(item, index) in subtournaments">
      <!-- <mu-menu-item class="item-title" :title="'Subtournament No.' + (index + 1)" itemClick="titleClick(index)">
       <mu-badge :content="item.discipline" slot="after" primary/>
      </mu-menu-item>
      <mu-paper class="demo-paper" :zDepth="2" >

      </mu-paper> -->
      <mu-card>
        <mu-card-title :title="'Subtournament No.' + (index + 1) + ' ' + item.discipline" />
        <mu-card-text>
          <form>
            <mu-text-field v-model="item.name" label="Subtournament Name" hintText="`The 5th xxx tournament`"/>
            <mu-select-field v-model="item.discipline" label="Discipline">
              <!-- <mu-menu-item value="ms" title="Men's Single"/> -->
              <mu-menu-item value="md" title="Men's Double"/>
              <!-- <mu-menu-item value="ws" title="Women's Single"/> -->
              <!-- <mu-menu-item value="wd" title="Women's Double"/> -->
              <mu-menu-item value="xd" title="Mixed Double"/>
            </mu-select-field>
            <mu-select-field v-model="item.maxPairs" label="Max Pairs">
              <mu-menu-item value="16" title="16"/>
              <mu-menu-item value="24" title="24"/>
              <mu-menu-item value="48" title="48"/>
            </mu-select-field>
            <mu-date-picker v-model="item.startDate" container="inline" hintText="Start Date"/>
            <mu-time-picker v-model="item.startTime" hintText="Start Time" format="24hr" container="inline"/>
            <mu-time-picker v-model="item.endTime" hintText="End Time" format="24hr" container="inline"/>
            <mu-text-field v-model="item.description" hintText="Tournament Description" multiLine :rows="3" :rowsMax="10"/>
          </form>
        </mu-card-text>
        <!-- <mu-card-actions>
          <mu-flat-button label="Delete" @click="deleteSub(index)"/>
        </mu-card-actions> -->
      </mu-card>
    </div>
    <div class="btn-container">
      <mu-raised-button label="Create！" fullWidth primary @click="create"/>
    </div>
  </div>
</template>

<script>
  import wdApi from './libs/wdApi'

  export default {
    data () {
      return {
        tournamentInfo: {},
        subtournaments: [
          {
            maxPairs: '16',
            discipline: 'md'
          }
        ]
      }
    },
    methods: {
      back () {
        this.$router.back()
      },
      addSubtournament () {
        this.subtournaments.push({
          maxPairs: '16',
          discipline: 'md'
        })
      },
      async create () {
        let promises = this.subtournaments.map(sub => {
          let Subtournament = wdApi.Object(['Subtournament'])
          return Subtournament.push(sub)
        })
        let subs = await Promise.all(promises)
        let Tournament = wdApi.Object(['Tournament'])
        let tour = await Tournament.push(this.tournamentInfo)
        let res = await tour.relation('Subtournament', 'subtournaments')
        .add(subs.map(el => wdApi.Object(['Subtournament', el.key()])))
        console.log(res)
      }
      // deleteSub (index) {
      //   if (this.subtournaments.length <= 1) return
      //   // this.subtournaments[index] = null
      //   this.subtournaments = this.subtournaments.filter((el, i) => i !== index)
      //   console.log(index)
      //   console.log(this.subtournaments)
      // }
    },
    created () {
      console.log(wdApi.Object(['Subtournament']))
      // wdApi.Object(['Subtournament']).push({
      //   name: '',
      //   admin: [],
      //   date: {
      //
      //   },
      //   description: '',
      //   discipline: '',
      //   maxParticipants: 0,
      //   state: 'signingUp',
      //   sys: ''
      // })
    }
  }
</script>

<style lang="less">
  .mu-appbar {
    position: fixed;
  }
  .paper-container {
    padding: 20px;
    padding-bottom: 0;
    &.first {
      padding-top: 70px;
    }
  }
  .item-title {
    padding: 0 15%;
    em {
      text-transform: uppercase;
    }
  }
  form {
    text-align: center;
    margin-top: 10px;
    .btn-container {
      margin-top: 50px;
    }
  }
  .btn-container {
    text-align: center;
    margin: 20px 0;
    button {
      width: calc(100%-10px);
      padding: 0 20px;
    }
  }
</style>
